<template>
  <div class="user-tabs userInfo">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="未读消息" name="first">
        <infoList :info-list="infodataUnread" :total="totalUnread" @changCurrentPage="changCurrentPage('unRead',$event)" />
      </el-tab-pane>
      <el-tab-pane label="已读消息" name="second">
        <infoList :info-list="infodataRead" :total="totalRead" @changCurrentPage="changCurrentPage('read',$event)" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getUnreadMsgAPI, getReadMsgAPI } from '@/api/web/hjUser.js'
import infoList from './compontes/infoList.vue'

export default {
  components: {
    infoList
  },
  data() {
    return {
      activeName: 'first',
      infodataUnread: [],
      totalUnread: 0,
      totalRead: 0,
      infodataRead: [],
      newInfo: [],
      oldInfo: [],
      currentPage: 0
    }
  },
  created() {
    this.getUnreadMsg()
    this.getReadMsg()
  },

  methods: {
    async getUnreadMsg(page = 0, size = 10) {
      const { content, totalElements } = await getUnreadMsgAPI(page, size)
      this.infodataUnread = content
      this.totalUnread = totalElements
    },
    async getReadMsg(page = 0, size = 10) {
      const { content, totalElements } = await getReadMsgAPI(page, size)
      this.infodataRead = content
      this.totalRead = totalElements
    },
    changCurrentPage(isRead, page) {
      if (isRead === 'unRead') {
        this.getUnreadMsg(page - 1)
      } else {
        this.getReadMsg(page - 1)
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/userTabs.scss';
</style>
